<template>
  <div>
    <div style="display: flex;">
      <div class="oneNav">
        <!-- vant侧边导航 -->
        <van-sidebar style="white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
          <van-sidebar-item v-for="(item,index) in oneClass" :key="index" :title="item.name" @click="oneNav(index)" />
        </van-sidebar>
      </div>
      <!-- 宫格 -->
      <van-grid column-num="4" :border="false" style="width:100%;">
        <van-grid-item use-slot v-for="(item, index) in twoClass" :title="item.name" :key="index">
          <image style="border-radius: 22px;width: 42%; height: 38px;" :src="item.icon" />
          <div style=" font-size: 60%;line-height: var(--card-desc-line-height,15px);color: var(--card-desc-color,#7d7e80);">{{item.name}}</div>
        </van-grid-item>
      </van-grid>
      <!-- 宫格 -->
    </div>
  </div>
</template>


<script>
import utils from "@/utils/index.js";

export default {
  config: {
    navigationBarTitleText: "分类"
  },
  data() {
    return {
      oneClass: [], //一级分类数据
      activeKey: 0,
      twoClass: [
        {
          name: "分类名称",
          url: "http://url.com",
          icon:
            "https://aliyun-image-goblog.oss-cn-shenzhen.aliyuncs.com/11111.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon:
            "https://aliyun-image-goblog.oss-cn-shenzhen.aliyuncs.com/11111.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon:
            "https://aliyun-image-goblog.oss-cn-shenzhen.aliyuncs.com/11111.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon:
            "https://aliyun-image-goblog.oss-cn-shenzhen.aliyuncs.com/11111.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon:
            "https://aliyun-image-goblog.oss-cn-shenzhen.aliyuncs.com/11111.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon: "https://img.yzcdn.cn/vant/apple-3.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon: "https://img.yzcdn.cn/vant/apple-1.jpg"
        },
        {
          name: "分类名称",
          url: "http://url.com",
          icon: "https://img.yzcdn.cn/vant/apple-1.jpg"
        }
      ] //二级分类数据
    };
  },
  onLoad() {
    this.$API.get("/categoryFirst/list").then(res => {
      this.oneClass = res;
      this.twoClass = this.oneClass[0].categoryList;
      for (let i = 0; i < this.twoClass.length; i++) {
        this.twoClass[i].icon = utils.fileMgrUrl + this.twoClass[i].icon;
      }
    });
    wx.setNavigationBarTitle({
      title: "分类"
    })
  },
  methods: {
    oneNav(index) {
      //点击一级导航切换
      this.$API.get("/categoryFirst/list").then(res => {
        //
        this.oneClass = res;
        this.twoClass = this.oneClass[index].categoryList;
        for (let i = 0; i < this.twoClass.length; i++) {
          this.twoClass[i].icon = utils.fileMgrUrl + this.twoClass[i].icon;
        }
      });
    }

    // onList(id){ //点击二级导航跳转列表页
    //   this.$router.push({
    //     path:'/list',
    //     query:{
    //       id
    //     }
    //   })
    // }
  }
};
</script>

<style scoped>
.van-sidebar::-webkit-scrollbar {
  display: none;
}
</style>
